<template>
	<view class="container" style="background-color: #f3f5f9;">

		<view class="title" style="margin-left: 130px;">预约系统</view>
		<view class="abc">
			<view class="form-group">
				<label>预约日期：</label>
				<picker mode="date" :value="date" @change="onDateChange">
					<view class="picker">{{ date }}</view>
				</picker>
			</view>
			<view class="form-group1">
				<label>预约时间：</label>
				<picker mode="time" :value="time" @change="onTimeChange">
					<view class="picker">{{ time }}</view>
				</picker>
			</view>
		</view>
		
			<view class="yuyue11">
        <text >主预约人 </text>
        <view style="color: red">*</view>
				</view>
			
		<view class="big">
			<view class="form-group">
				<label >姓名<view style="color: red">*</view>：</label>
				<input class="small" type="text" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="form-group">
				<label>证件类型<view style="color: red">*</view>：</label>
				<picker mode="selector" :range="idTypes" @change="onIdTypeChange">
					<view class="picker">{{ idTypes[idTypeIndex] }}</view>
				</picker>
			</view>
			<view class="form-group">
				<label>证件号码<view style="color: red">*</view>：</label>
				<input class="small" type="text" v-model="idNumber" placeholder="请输入证件号码" />
			</view>
			<view class="form-group">
				<label>手机号码<view style="color: red">*</view>：</label>
				<input class="small" type="number" v-model="phone" placeholder="请输入手机号码" />
			</view>
      <view class="form-group">
        <label>同行人数<view style="color: red">*</view>：</label>
        <input class="aaa" type="number" v-model.number="totalPeople" placeholder="请输入同行人数" />
      </view>
		</view>

    <view class="form-group" v-for="(member, index) in members" :key="index">
      <view class="msg001" >
        <label class="label01">同行人 {{ index + 1 }}：</label>
        <image class="img001" @click="removeMember(index)"  src="../../static/111.png"> </image>
      </view>
      <view class="big">
        <view class="form-group">
          <label>姓名<view style="color: red">*</view>：</label>
          <input class="small" type="text" v-model="name" placeholder="请输入姓名" />
        </view>
        <view class="form-group">
          <label>证件类型<view style="color: red">*</view>：</label>
          <picker mode="selector" :range="idTypes" @change="onIdTypeChange">
            <view class="picker">{{ idTypes[idTypeIndex] }}</view>
          </picker>
        </view>
        <view class="form-group">
          <label>证件号码<view style="color: red">*</view>：</label>
          <input class="small" type="text" v-model="idNumber" placeholder="请输入证件号码" />
        </view>
        <view class="form-group">
          <label>手机号码<view style="color: red">*</view>：</label>
          <input class="small" type="number" v-model="phone" placeholder="请输入手机号码" />
        </view>
        <view class="tip">
          <image class="img002" src="../../static/222.png"> </image>
          <text>同行人有6周岁（含）以下或身高1.2米（含）以下儿童，
          只需选择儿童数。
          </text>
        </view>
        <view class="people-selector">
          <radio-group bindchange="handlePeopleChange">
            <view class="select">
            <label class="radio-label"><radio value="1" checked="{{people === '1'}}">1人</radio></label>
            <label class="radio-label"><radio value="2" checked="{{people === '2'}}">2人</radio></label>
            <label class="radio-label"><radio value="3" checked="{{people === '3'}}">3人</radio></label>
            </view>
          </radio-group>
        </view>

        </view>
  </view>

    <button class="button02" @click="addMember"   >
		<image class="img003" src="../../static/333.png"></image> <text class="t1">添加同行人</text>
	</button>
    <view class="extra-info">
      <image class="img004" src="../../static/444.png"></image>
      <text class="t2">最多可预约成人4人，儿童3人</text>
    </view>
    <button class="button" @click="submitReserve"  >提交预约</button>
  </view>
</template>

<script>
	export default {
		data() {
			return {

				date: '2024-7-16',
				time: '12:00:00',
				name: '',
				idTypes: ['中国居民身份证', '护照', '其他'],
				idTypeIndex: 0,
				idNumber: '',
				phone: '',
				companions: '',
				userInfoType: 'person',
				members: [{
					name: '',
					idType: '',
					idNumber: '',
					phoneNumber: '',
					userInfoType: 'group'
				}, ],
			};
		},
		methods: {
			onDateChange(e) {
				this.date = e.detail.value;
			},
			onTimeChange(e) {
				this.time = e.detail.value;
			},
			onIdTypeChange(e) {
				this.idTypeIndex = e.detail.value;
			},
			submitReserve() {
				const userData = {
					date: this.date,
					time: this.time,
					name: this.name,
					idType: this.idTypes[this.idTypeIndex],
					idNumber: this.idNumber,
					phone: this.phone,
					companions: this.companions,
					userInfoType: this.userInfoType
				};
				uni.setStorage({
					key: 'userData',
					data: JSON.stringify(userData),
					success: function() {
						console.log('数据存储成功');
						uni.navigateTo({
							url: '/pages/successfulApointment/successfulApointment'
						})
					}
				})
				
			},
			addMember() {
        if (this.members.length < this.totalPeople) {
          this.members.push({
            name: '',
            idType: '',
            idNumber: '',
            phoneNumber: ''
          });
        } else {
          uni.showToast({
            title: '已达到预约人数上限',
            icon: 'none'
          });
        }
      },
        removeMember(index) {
          if (this.members.length > 0) { // 假设至少保留一个成员
            this.members.splice(index, 1);
            this.updateTotalPeople();
          }
        },
        updateTotalPeople() {
          this.totalPeople = this.members.length;
        },
        submitReserve1() {
          const userData = {
            date: this.date,
            time: this.time,
            teamName: this.teamName,
            totalPeople: this.totalPeople,
            membername: this.membername,
            memberidType: this.memberidType,
            /*[this.memberidTypeIndex],*/
            memberidNumber: this.memberidNumber,
            memberphoneNumber: this.memberphoneNumber,
            userInfoType: this.userInfoType

          };

          uni.setStorage({
            key: 'userData',
            data: JSON.stringify(userData),
            success: function() {
              console.log('数据存储成功');
              uni.navigateTo({
                url: '/pages/successfulAppoGroup/successfulAppoGroup'
              })
            }
          })
			
			
			
			},
		},
	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.form-group {
		margin-bottom: 15px;

	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
    display: flex;
    flex-direction: row;
	}
	.form-group1{
		margin-bottom: 15px;
		margin-left: 10%;
	}
	.form-group1 label {
		display: block;
		margin-bottom: 5px;
	}
	
	.picker {
		border: 2px;
		border-color: #f3f5f9;
		border-style: solid;
		background-color: #f3f5f9;
		border-radius: 7px;
		width: 100%;
	}

	.abc {
		display: flex;
		flex-direction: row;
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		border-width: 10px;
		border-top-width: 5px;
		border-bottom-color: #f3f5f9;
		border-bottom-style: none;
	
	}

	.big {
		border: 1px;
		border-color: white;
		border-style: solid;
		background-color: white;
		border-radius: 10px;
		border-left-width: 15px;
		border-right-width: 15px;
		border-bottom-width: 5px;
		width: 320px;
    height: 100%;
	}

	.small {
		border: 2px;
		border-color: #f3f5f9;
		border-style: solid;
		background-color: #f3f5f9;
		border-radius: 7px;
		width: 100%;
	}
  .button{
    width: 351px;
    height: 45px;
    background: #8DCB6D;
    border-radius: 25px;
    margin-top: 40rpx;
  }
  .yuyue11{
	  background: #f3f6f9;
	  margin-bottom: 12rpx;
    display: flex;
    flex-direction: row;
  }


  .tip{
    width: 299px;
    height: 34px;
    opacity: 0.75;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #323232;
    letter-spacing: 0;
	display: flex;
	flex-direction: row;
  }

  .aaa {
    border: 2px;
    border-color: #f3f5f9;
    border-style: solid;
    background-color: #f3f5f9;
    border-radius: 7px;
    width: 100%;
  }

  .ccc label{
    display: block;
    margin-bottom: 5px;
  }
  .people-selector{
    width: 1000px;
    height: 40px;
    opacity: 0.75;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #323232;
    letter-spacing: 0;
  }
  .radio-label{
    width: 52px;
    height: 24px;
    background: #F4F4F4;
    border: 1px solid #BEC3BC;
    border-radius: 14px;

  }
  .select{
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
    margin-left: 280rpx;
  }
  .button02{
    width: 351px;
    height: 60px;
    background: #FFFFFF;
    border: 1px solid #8DCB6D;
    border-radius: 12px;
    margin-top: 10%;
    display: flex;
    flex-direction: row;
  }
  .img001{
    width: 40px;
    height: 24px;
    background: #575B66;
    margin-top: 10rpx;
  }
  .msg001{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 40px;
  }
  .label01{
    width: 400px;
    height: 21px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #000000;
    letter-spacing: 0;
    margin-top: 10rpx;
  }
  .img002{
    width: 60px;
    height: 30px;
    background: #8DCB6D;
  }
  .img003{
    width: 21px;
    height: 21px;
    background: #666666;
    margin-top: 25rpx;
    margin-left: 35%;
  }
  .t1{
    width: 75px;
    height: 21px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 15px;
    color: #323232;
    letter-spacing: 0;
    margin-top: 10rpx;
  }
  .t2{
    width: 159px;
    height: 17px;
    opacity: 0.75;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #323232;
    letter-spacing: 0;
    margin-top: 10rpx;
  }
  .img004{
    width: 20px;
    height: 20px;
    background: #8DCB6D;
    margin-top: 5rpx;

  }
  .extra-info{
    display: flex;
    flex-direction: row;
    margin-top: 10rpx;
  }
</style>